<template>
  <view class="bg-white rounded-xl p-4 shadow-sm flex items-start space-x-4">
    <image
      :src="
        item.materialImg ??
        'https://imgservice.suning.cn/uimg1/b2c/image/p-_tBk2Q5xzEMDONkIdFWw.jpg_800w_800h_4e'
      "
      class="w-[180rpx] h-[240rpx] rounded-lg object-cover mr-2"
      mode="aspectFill"
    />
    <view class="flex-1">
      <view class="text-base font-semibold text-[#0f3a80]">{{
        item.title
      }}</view>
      <view class="text-xs text-gray-500 mt-1 line-clamp-2">{{
        item.materialName
      }}</view>
      <view class="mt-3">
        <view class="w-full h-2 bg-[#f3f7ff] rounded-full overflow-hidden">
          <view
            :style="{
              width:
                (Number(item.totalDonated) / Number(item.count)) * 100 + '%'
            }"
            class="h-full bg-[#4A8DFF]"
          ></view>
        </view>
        <view class="text-xs text-gray-400 mt-1"
          >已捐 {{ item.totalDonated }}/{{ item.count }}</view
        >
      </view>
      <view class="w-full flex items-center justify-between mt-3">
        <view
          v-for="tag in item.materialTag.split(',')"
          :key="tag"
          class="text-xs px-2 py-0.5 rounded-full bg-[#f0f8ff] text-[#2469ff]"
          >#{{ tag }}</view
        >
        <view>
          <button
            class="ml-3 px-4 py-2 rounded-lg bg-[#2469ff] text-white text-sm"
            @click="handleDonate"
          >
            捐赠
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{ item: DonationItem }>()
const emit = defineEmits<{ (e: 'donate', item: DonationItem): void }>()

function handleDonate() {
  emit('donate', props.item)
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
